<template>
  <div class="home">
    <div class="wrap">
      <DrawBoard
        v-show="statue==='draw'"
        @draw-begin="onDrawBegin"
        @on-draw="onDraw"
        @draw-end="onDrawEnd"
      />
      <transition name="fade">
        <TipBar v-show="tipVisible" :content="tipWord"/>
      </transition>
    </div>
    <canvas v-show="statue==='guess'" ref="drawCanvas" width="375px" height="320px"></canvas>
    <input @click="drawComplete" type="button" value="演示">
  </div>
</template>

<script>
// @ is an alias to /src
const ServerCanvasWidth = 375;
import Socket from "@/util/Socket.js";
import DrawBoard from "@/components/DrawBoard.vue";
import Scale from "@/util/scale.js";
import CanvasDraw from "@/util/canvasDraw.js";
import TipBar from "@/components/TipBar.vue";
let ws;
let ctx;
let drawStartTime;
/*
    定义绘画数据数据结构,绘画数据包含一组笔画，笔画包含 线宽、颜色和一组路径坐标(记录坐标时间)
    let drawData=[
        {
            width:12,
            color:'#000',
            posArr:[{x:0,y:0，delay:200}]
        }
    ]
*/
let drawData = [];
export default {
  name: "home",
  data() {
    return {
      statue: "draw",
      tipWord: "我画：围巾 (服饰)",
      tipVisible: false
    };
  },
  methods: {
    onDrawBegin({ x, y, color, width }) {
      let posArr = Scale.localToServer([{ x, y }]);
      posArr[0].delay = parseInt(new Date() - drawStartTime);
      drawData.push({
        width,
        color,
        posArr,
        delay: posArr[0].delay
      });
    },
    onDraw({ x, y }) {
      let posArr = Scale.localToServer([{ x, y }]);
      posArr[0].delay = parseInt(new Date() - drawStartTime);
      drawData[drawData.length - 1].posArr.push(posArr[0]);
    },
    onDrawEnd({ x, y }) {
      let posArr = Scale.localToServer([{ x, y }]);
    },
    drawByStrokeData(ctx, strokeData) {
      CanvasDraw.drawByStrokeData(ctx, strokeData);
    },
    drawComplete() {
      //tode send drawdata to serve;
      Socket.addLisener("save_single_draw_ok", serverData => {
        this.$router.push({
          path: "singledraw",
          query: { gameId: serverData.gameId }
        });
      });
      Socket.send(JSON.stringify({ op: "save_single_draw", drawData }));
      this.$refs.drawCanvas.height = this.$refs.drawCanvas.height;
      CanvasDraw.reDraw(ctx, drawData, 1);
    },
    listenSocket() {
      let gameId = this.$route.query.gameId;
      if (gameId) {
        this.statue = "guess";
        Socket.addLisener("get_single_draw", serverData => {
          drawData = serverData.gameData;
          if (drawData && drawData.length > 0) {
            const scale = document.body.clientWidth / 375;
            CanvasDraw.reDraw(ctx, drawData, scale);
          }
        });

        if (Socket.IsReady) {
          Socket.send(JSON.stringify({ op: "get_single_draw", gameId }));
        } else {
          Socket.onopen = function() {
            Socket.send(JSON.stringify({ op: "get_single_draw", gameId }));
          };
        }
      } else {
        setTimeout(() => {
          this.tipVisible = true;
          setTimeout(() => {
            this.tipVisible = false;
          }, 1500);
        }, 1000);
      }
    }
  },
  mounted() {
    let xs = document.body.clientWidth / this.$refs.drawCanvas.width;
    this.$refs.drawCanvas.width = document.body.clientWidth;
    this.$refs.drawCanvas.height = this.$refs.drawCanvas.height * xs;
    ctx = this.$refs.drawCanvas.getContext("2d");
    this.listenSocket();
    drawStartTime = new Date();
  },
  components: {
    DrawBoard,
    TipBar
  }
};
</script>

<style scoped>
.wrap {
  position: relative;
}

.tip_bar {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.fade-leave-active {
  transition: opacity 3s;
}
.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
